<template>
  <div class="tags-wrap" ref="tagsWrap" >
    <span class="icon-wrap" @click="navigationPrevEl">
      <svg-icon icon-class="tags_prev" class-name="icon" />
    </span>
    <ul class="tags" ref="tags">
      <li v-for="item in visitedViews" :key="item.path" class="item-box">
        <router-link :to="item.path">
          <div :class="['item', {'active': route.path == item.path}]">
            {{item.title}}
            <span class="close-box" @click.prevent="handleDeleteView(item.path)">
              <svg-icon icon-class="tags_close" class-name="icon"/>
            </span>
          </div>
        </router-link>
      </li>      
    </ul>
    <span class="icon-wrap icon-next" @click="navigationNextEl($event)">
      <svg-icon icon-class="tags_next" class-name="icon" />
    </span>
  </div> 
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'TagView',
  data() {
    return {
      surplusWidth: '', // 
    }
  },
  computed: {
    ...mapGetters(['visitedViews']),
    route() {
      return this.$route
    }
  },
  watch: {
    visitedViews: {
      handler() {
        console.log('watch', this.visitedViews)
        this.$nextTick(() => {
          this.widthDiff()
        })
        
      },
      deep: true
    }
  },
  methods: {
    handleDeleteView(path) {
      this.$store.dispatch('tagsView/deleteView', path)
    },
    // 
    widthDiff() {
      const tags = this.$refs.tags
      const prenWidth = this.$refs.tagsWrap.offsetWidth - 32
      const chilWidth = tags.offsetWidth
      const lastChilWidth = tags.querySelector('.active').offsetWidth + 16
      console.log(prenWidth, chilWidth)
      if (chilWidth  > prenWidth) {
        console.log(this.surplusWidth,lastChilWidth)
        tags.style.left = tags.offsetLeft + this.surplusWidth - lastChilWidth + 'px'
        tags.style.transition = 'all .5s'
        this.surplusWidth = 0
      } else {
        this.surplusWidth = prenWidth - chilWidth
      }
    },
    // 前进
    navigationNextEl(e) {
      const tags = this.$refs.tags
      const prenWidth = this.$refs.tagsWrap.offsetWidth
      const chilWidth = tags.offsetWidth
      const chilLeft = tags.offsetLeft
      console.log(prenWidth, chilWidth, chilLeft)
      console.log(prenWidth, chilWidth + chilLeft)
      if (prenWidth <= chilWidth + chilLeft) {
        tags.style.left = tags.offsetLeft - 100 + 'px'
      } else {
        tags.style.left = tags.offsetWidth + chilLeft + (prenWidth - chilWidth + chilLeft)
      }
      // 
      tags.style.transition = 'all .5s'
    },
    // 后退
    navigationPrevEl(e) {
      const tags = this.$refs.tags
      console.log(tags.offsetLeft)
      if (tags.offsetLeft >= 16) {
        // tags.style.hover.cursor = 'not-allowed'
        tags.style.left = 16 + 'px'
        return
      }
      tags.style.left = tags.offsetLeft + 100 + 'px'
      tags.style.transition = 'all .5s'
      console.log(tags.offsetLeft)
    }

  }

}
</script>

<style lang="scss" scoped>
  .tags-wrap {
    position: relative;
    overflow: hidden;
    @include attribute("height", "height-breadcrumb");
    > .icon-wrap {
      z-index: 1;
      display: inline-block;
      position: absolute;
      margin-top: 12px;
      width: 16px;
      height: 16px;
      background: rgba(0, 0, 0, 0.2);
      line-height: 16px;
      text-align: center;
      border-radius: 50%;
      cursor: pointer;
      .icon {
        width: 10px;
      }
    }
    > .icon-next {
      right: 0;
      top: 0;
    }
    .tags {
      position: absolute;
      left: 16px;
      top: 0;
      display: inline-block;
      .item-box {
        float: left;
        .item {
          float: left;
          margin: 6px 8px;
          padding: 0 10px;
          height: 28px;
          background: #F2F6FC;
          border-radius: 2px;
          font-size: 12px;
          color: #999;
          line-height: 28px;
          .close-box {
            display: inline-block;
            width: 20px;
            height: 100%;
            text-align: center;
            .icon {
              width: 9px;
            }
            :hover.icon {
              color: #409EFF;
            }
          }
        }
        .item::before {
          content: '';
          display: inline-block;
          margin-right: 5px;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #CBCFD5;
        }
        .item.active {
          background: #fff;
          color: #333;
        }
        .item.active::before {
          background: #409EFF;
        }
      }
      
    }
  }
  
</style>
